import React from "react";
import {Input, Tooltip} from 'antd';
import BaseField from "../Base/BaseField";
import {isArray, isFunction, omit} from "lodash-es";
import PropTypes from "prop-types";
import {FinderSelectBase} from "./index";

/**
 * 查找器-区间选择
 */
export default class FinderRangeBase extends BaseField {

    static propTypes = {
        ...BaseField.propTypes,
        value: PropTypes.any,
        defaultValue: PropTypes.any
    };

    _needForceFetch = false;

    /**
     * 是否需要强制请求下拉列表的数据。
     * @type {boolean}
     */
    set needForceFetch(value) {
        [this.finderIns1, this.finderIns2].forEach((ins) => {
            if (ins) {
                ins.needForceFetch = value;
            }
        });
        this._needForceFetch = value;
    }

    get needForceFetch() {
        return this._needForceFetch;
    }

    /**
     * 设置“组件的值-编辑前”事件处理。重复调用此方法，可实现“多次事件绑定”
     * @param cb {function(compIns: {})} // compIns 是当前编辑组件的实例
     */
    addEditBeforeHandler(cb) {
        if (isFunction(cb)) {
            [this.finderIns1, this.finderIns2].forEach((ins) => {
                if (ins && ins.addEditBeforeHandler) {
                    ins.addEditBeforeHandler(cb);
                }
            })
        }
    }

    /**
     * 设置“组件的值-编辑后”事件处理。重复调用此方法，可实现“多次事件绑定”
     * @param cb {function(value)}
     */
    addEditAfterHandler(cb) {
        if (isFunction(cb)) {
            [this.finderIns1, this.finderIns2].forEach((ins) => {
                if (ins && ins.addEditAfterHandler) {
                    ins.addEditAfterHandler(cb);
                }
            })
        }
    }

    /**
     * 设置下拉列表数据
     * @param data {[{id?: number, code?: string, name?:string}]}
     * @param afterCb
     */
    setData(data, afterCb) {
        [this.finderIns1, this.finderIns2].forEach((ins) => {
            if (ins && ins.setData) {
                ins.setData(data, afterCb);
            }
        })
    }

    mainRender(context) {
        const props = this.getProps();
        const width = props.style && props.style.width ? props.style.width : '100%';
        const {value} = this.state;
        let minVal = null;
        let maxVal = null;
        if (isArray(value)) {
            minVal = value[0];
            maxVal = value[1];
        }
        const w = `calc((${width} - 30px) / 2)`;
        const finderProps = omit(props, ['onRef', 'exeInMount']);
        return (
            <>
                <FinderSelectBase
                    {...finderProps}
                    onRef={(ins) => {
                        this.finderIns1 = ins;
                    }}
                    value={minVal}
                    onChange={(val) => {
                        const value = isArray(this.state.value) ? [...this.state.value] : [];
                        value[0] = val;
                        this.hdlValueChange(value);
                    }}
                    style={{width: w}}
                />
                <Input
                    className="site-input-split"
                    style={{
                        width: 31,
                        border: 'none',
                        pointerEvents: 'none',
                        background: '#fff'
                    }}
                    placeholder="~"
                    disabled
                />
                <FinderSelectBase
                    {...finderProps}
                    onRef={(ins) => {
                        this.finderIns2 = ins;
                    }}
                    value={maxVal}
                    onChange={(val) => {
                        const value = isArray(this.state.value) ? [...this.state.value] : [];
                        value[1] = val;
                        this.hdlValueChange(value);
                    }}
                    style={{
                        width: w,
                        borderLeft: 0
                    }}/>
            </>
        );
    }
}